<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul ref="list">
				<li v-for="item in list" :key="item.imgId">
					<img :src="item.img" :alt='item.alt' :title="item.title" >
				</li>
			</ul>
		</div>
	</body>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="axios.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			
		const vm = new Vue({
		    el:"#app",
			data:{
				list:[]
			},
		    created() {
				console.log(this.$refs.list);
		        /*怀上了*/
		        // 数据请求
		        // console.log("实例创建之后")
				const url = "http://localhost:3000/api/banner"
				// fetch(url,{}).then(res=>{
				// 	return res.json()
				// }).then(data=>{
				// 	// console.log(data);
				// 	this.list = data.data;
				// })
				// axios.get(url)
				//   .then((response)=>{
				//     console.log(response.data.data);
				// 	this.list = response.data.data;
				//   })
		    },
			beforeMount(){
				console.log(this.$refs.list);
			},
			mounted(){
				// 挂在到页面之后才能获取到页面元素
				console.log(this.$refs.list)
			}
		})
	</script>
</html>
